<template>
    <el-popover placement="bottom-start" trigger="click" v-model="searchVisible">
      <el-button-group slot="reference" >
        <el-button type="primary" icon="el-icon-search" @click.stop="query">查询</el-button>
        <el-button type="primary" icon="el-icon-arrow-down" class="caret-button"></el-button>
        <el-badge :value="badgeCount" :hidden="badgeCount===0" class="badge" ></el-badge>
      </el-button-group>
      <div class="Search-Body">
        <el-scrollbar class="scrollbar-handle">
          <vxe-form :data="value" title-width="100" title-align="right" span="24">
            <!-- 插槽 -->
            <slot></slot>
          </vxe-form>
        </el-scrollbar>
      </div>
      <div class="Search-Footer">
        <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
      </div>
    </el-popover>
</template>

<script>
export default {
  props: {
    //queryEntity查询实体
    value: {
      type: Object,
      default: {},
    }
  },
  computed:{
    //条件记录数
    badgeCount(){
      let count = 0;
      Object.values(this.value).forEach(e => {
        if(!this.util.validateNull(e)) count = count + 1;
      });
      return count;
    }
  },
  data() {
    return {
      searchVisible: false, //查询框可见
    };
  },
  methods:{
    reset(){
      this.$emit("input", {});
    },
    query(){
      this.searchVisible = false;
      this.$emit(`query`);
    }
  }
};
</script>

<style lang="less" scoped>
.badge {
  display: inline;
  margin:0 1px;
}
.caret-button{
  padding-left: 5px;
  padding-right: 5px;
}
.el-popover .Search-Body {
  height: 250px;
  width: 450px;
  padding: 5px 8px 6px 8px;
}
.el-popover .Search-Body .el-button {
  position: absolute;
  top: 0;
  right: 0;
}
.el-popover .Search-Footer {
  flex-shrink: 0;
  text-align: right;
  padding: 3px 8px 5px 8px;
}
</style>